import './Scss/MachineryMobilization.scss'
import { useSize, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useState, useRef, useEffect } from 'react'
import { Column } from '@ant-design/plots'

const SliceString = str => {
    let strArr = []
    for (let i = 0; i < str.length; i += 3) {
        strArr.push(str.slice(i, i + 3))
    }
    return strArr.join('\n')
}

export const MachineryMobilization001 = ({ type, color }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const [Active, setActive] = useState('1')
    const [TableList, setTableList] = useState([])

    const { run: geyMachineManageGetListByType } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            list.forEach(({ tableName, machineCount, machineTypeStandardCount }) => {
                let name = SliceString(tableName)
                data = [
                    ...data,
                    { name: '标配数', type: name, value: machineTypeStandardCount },
                    { name: '进场数', type: name, value: machineCount },
                ]
            })
            setData(data)
        },
    })
    useEffect(() => {
        geyMachineManageGetListByType({
            url: `getMachineManageGetListByType`,
            data: { OrganizationUuid: Active === '1' ? '' : Active },
        })
    }, [Active, geyMachineManageGetListByType])

    const { run: getOrganizations } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            let data = []
            if (type !== 'noAll') data = [{ uuid: '1', title: '全部' }]
            list.forEach(({ uuid, tableName }) => (data = [...data, { uuid, title: tableName }]))
            const [{ uuid }] = data
            setActive(uuid)
            setTableList(data)
        },
    })

    useEffect(() => {
        getOrganizations({ url: 'getOrganizations', data: { OrgType: 3 } })
    }, [getOrganizations])

    const [data, setData] = useState([
        { name: '标配数', type: '基层\n铺摊机', value: parseInt(Math.random() * 100) },
        { name: '进场数', type: '基层\n铺摊机', value: parseInt(Math.random() * 100) },
    ])

    const [Charts, setCharts] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 24,
                data,
                isGroup: true,
                xField: 'type',
                yField: 'value',
                seriesField: 'name',
                color: ['#B2FBFD', '#FAD688'],
                legend: {
                    layout: 'horizontal',
                    position: 'top',
                    offsetY: 24,
                    itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
                },
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },

                // scrollbar: {
                //     type: 'horizontal',
                //     categorySize: 120,
                //     style: {
                //         thumbColor:color[0],
                //         trackColor: color[1],
                //         thumbHighlightColor: 'white',
                //     },
                // },
            }
            setCharts(config)
        }
    }, [size, data])

    return (
        <div className="MachineryMobilization001">
            {type !== 'all' && (
                <div className="Left">
                    <div>
                        {TableList.map(({ uuid, title }) => (
                            <div className={Active === uuid ? 'active' : ''} key={uuid} onClick={() => setActive(uuid)}>
                                {title}
                            </div>
                        ))}
                    </div>
                </div>
            )}
            <div className="Right" ref={ChartsBox}>
                {Charts && <Column {...Charts} />}
            </div>
        </div>
    )
}
